<template>
  <div class="product-info-container">
    <h1>产品信息</h1>
    <table>
      <thead>
        <tr>
          <th>编号</th> <!-- 新增商品类别编号列 -->
          <th>名称</th>
          <th>属性</th>
          <th>分类</th>
          <th>价格（元）</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in paginatedProducts" :key="product.name">
          <td>{{ product.code }}</td> <!-- 显示商品类别编号 -->
          <td>{{ product.name }}</td>
          <td>{{ product.attribute }}</td>
          <td>{{ product.category }}</td>
          <td>{{ product.price }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button v-for="page in totalPages" :key="page" @click="goToPage(page)">{{ page }}</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductInfo',
  data() {
    return {
      products: [
        { code: '001', name: '衬衫', attribute: 'L', category: '日用', price: '7.8' },
        { code: '002', name: '裤子', attribute: 'M', category: '服装', price: '15.5' },
        { code: '003', name: '鞋子', attribute: '42', category: '鞋类', price: '50.0' },
        { code: '004', name: '帽子', attribute: '均码', category: '配饰', price: '12.0' },
        { code: '005', name: '手表', attribute: '防水', category: '配饰', price: '200.0' },
        { code: '006', name: '手机', attribute: '128GB', category: '电子', price: '3000.0' },
        { code: '007', name: '电脑', attribute: '16GB RAM', category: '电子', price: '8000.0' },
        { code: '008', name: '平板', attribute: '64GB', category: '电子', price: '1500.0' },
        { code: '009', name: '耳机', attribute: '无线', category: '电子', price: '300.0' },
        { code: '010', name: '电视', attribute: '4K', category: '家电', price: '5000.0' },
        { code: '011', name: '冰箱', attribute: '双门', category: '家电', price: '2500.0' },
        { code: '012', name: '洗衣机', attribute: '滚筒', category: '家电', price: '1800.0' },
        { code: '013', name: '空调', attribute: '1.5匹', category: '家电', price: '3000.0' },
        { code: '014', name: '微波炉', attribute: '20L', category: '家电', price: '500.0' },
        { code: '015', name: '电饭煲', attribute: '5L', category: '家电', price: '300.0' },
        { code: '016', name: '吸尘器', attribute: '无线', category: '家电', price: '800.0' },
        { code: '017', name: '热水器', attribute: '50L', category: '家电', price: '1200.0' },
        { code: '018', name: '电风扇', attribute: '台式', category: '家电', price: '200.0' },
        { code: '019', name: '灯具', attribute: 'LED', category: '家居', price: '100.0' },
        { code: '020', name: '沙发', attribute: '三人座', category: '家具', price: '3000.0' }
      ],
      currentPage: 1,
      itemsPerPage: 10,
      totalPages: 4
    };
  },
  computed: {
    paginatedProducts() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.products.slice(start, end);
    }
  },
  methods: {
    goToPage(page) {
      this.currentPage = page;
    }
  }
}
</script>

<style scoped>
.product-info-container {
  padding: 20px;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 18px;
  background-color: #f9f9f9; /* 表格背景色 */
}

th {
  background-color: #4CAF50; /* 表头背景色 */
  color: white; /* 表头文字颜色 */
  padding: 10px;
}

td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

tr:nth-child(even) {
  background-color: #f2f2f2; /* 偶数行背景色 */
}

tr:hover {
  background-color: #ddd; /* 悬停效果 */
}

.pagination {
  margin-top: 10px;
}

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  background-color: #4CAF50; /* 按钮背景色 */
  color: white; /* 按钮文字颜色 */
  border: none;
  cursor: pointer;
}

.pagination button:hover {
  background-color: #45a049; /* 按钮悬停效果 */
}
</style>